<script setup lang="ts">
// 主页
import IndexHead from "@/views/IndexHead.vue";

</script>

<template>
  <div class="app-container">
    <!-- 主页头部 -->
    <el-row  class="index-header">
      <el-col :span="24">
          <index-head></index-head>
      </el-col>
    </el-row>
    <!-- 主页内容 -->
    <el-row  class="index-content">
      <el-col class="index-content-col" :span="24">
          <router-view v-slot="{ Component }">
            <transition name="fade">
              <component :is="Component"/>
            </transition>
          </router-view>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
}

.index-header {
  height: 7%;
}

.index-content {
  height: 93%;
  padding-top: 0.6%;
  padding-left: 0.3%;
  padding-right: 0.3%;
  background-color: #e6e6e6;
  box-shadow: 0 -5px 10px -5px #b1b1b1;
  overflow: hidden;
}

.index-content-col {
  height: 100%;
  overflow: hidden;
}

/* 路由切换动画 */
/* fade-transform */
.fade-enter-active {
  transition: all 0.5s;
}

/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}

.fade-enter-to {
  opacity: 1;
  transform: translateY(0px);
}

</style>
